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CAPÍTULO 16 


COMPONENTES Ricos 


Atualmente, as aplicações que trabalham na plataforma Web cada vez mais precisam 
ser amigáveis e de fácil utilização por parte dos usuários. Para atender estas necessidades, 
é muito comum Yprecisarmos de componentes que facilitam esse processo e criar 
componentes JSF ricos, que possuem uma excelente interação, não é uma tarefa fácil. 

Além disso, é muito comum precisarmos de um determinado componente e este Já 
tenha sido criado de maneira semelhante por algum desenvolvedor ou empresa. Isto nos 
lembra daquela premissa de que não devemos "reinventar a roda", ou seja, vamos utilizar 
esses componentes prontos ao invés de refazê-los. 

Existem diversas bibliotecas de componentes criadas para o JSF, das quais se 
destacam o JBoss  Richfaces  (http://www.jboss.org/richfaces) e o  PrimeFaces 


(http://www.primefaces.org/). 


16.1. PRIMEFACES 


À tela de cadastro que está funcionando adequadamente. Porém, sabemos que a tela 
não está tão amigável quanto poderíamos deixá-la. Existem algumas deficiências nela. 

Por exemplo, no campo de telefone há a possibilidade do usuário digitar telefones 
inválidos, o que ocasionaria um erro e uma inconsistência em nosso sistema. 

Uma prática comum para evitar este problema citado, seria utilizar uma 
implementação em JavaScript para formatar o dado digitado. 

Porém, usaremos o PrimeFaces, uma das bibliotecas de componentes mais famosas 
para JSF2. Na época do JSF 1.x, o Richfaces era a biblioteca mais famosa. Mas, a demora 
(quase 2 anos) para lançar a versão compatível com JSF2 fez com que o Primefaces 
dominasse o mercado das aplicações em JSF2. Além disso, o Primefaces possui centenas de 
componentes ricos, muito mais que o Richfaces. Acesse o site http://primefaces.org/showcase 
e conheça mais de 100 componentes ricos que podem ser utilizados gratuitamente. Colocá-lo 
em nossa aplicação é muito simples, basta baixar O JAR e copiá-lo para dentro da pasta 
WEB-INF /LIB da sua aplicação. 














16.2. CONFIGURAÇÃO 


À única configuração necessária é declarar uma servlet do PrimeFaces responsável por 
enviar os recursos necessários para o funcionamento para o cliente. Em servidores que 
suportam Servlet 3.0/Java EE 6, como o Glassfish 3.0 ou o Tomcat ', esse procedimento não 
é necessário e pode ser ignorado. 
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<servlet> 
<servlet-name>Resource sServlet</servlet-name> 
<servlet-class>org.primefaces. resource. ResourceServlet</szervlet-class> 
<fzervilet> 
<servlet-mapping> 
<servlet-name>Resource Servlet</servlet-name> 
<url-pattern>/primefaces resource/*</url-pattern> 
</'zervlet-mappingo> 


O próximo passo é adicionar o namespace do PrimeFaces na tag <urmi>: 


<html xmlns="http://vrv.v3.0org/1999/xhtEml" 
«mins:h="http://java. sun. com/9sf/html" 
mins: Sid Fr ques: sun. Ea bo 


16.3. MÁSCARA EM INPUTS 





Como vimos, o PrimeFaces possui diversos componentes que podem ser utilizados em 
uma aplicação. Por exemplo, podemos fazer com que o campo TeLzronE só possa ser informado 
no formato adequado. Uma das formas de conseguirmos Isso é através de caixas de texto 
que contenham uma máscara pré-definida para formatar o valor de forma adequada. 

No PrimeFaces existe o componente inputMasK, onde podemos informar um atributo 
chamado mask com a máscara adequada. Nesse caso, para a entrada de um TeLrrowE, teríamos: 


<p: inputMask value="f/alunoBean.aluno. telefone)" mask=" (99) 9999-9999"/» 


16.4. EXERCÍCIOS: Máscara no campo telefone 





1) Localize a pasta PROJETOS no moodle e copie o projeto dsl-jsf-escola na sua área de 
trabalho. 


2) Importe o projeto para o eclipse. 
3) Habilite o Primefaces, adicionando o JAR à sua aplicação. Localize a pasta 
PRIMEFACES no moodle e copie o JAR para o diretório WesContent/WEBINF /LIB do seu 


projeto. 


4) Configure a Servir que o Primefaces utiliza internamente. Para isso, ADICIONE ao 
seu wEB.xML à seguinte declaração: 
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<«fservlet-mapping> 
<servlet> 
«servlet-class>org.primefaces. resource. ResourceServlet<«/servlet-class> 


</servlet> 
<servlet-mapping> 


<«url-pattern>/primefaces resource/*</url-pattern> 
<'zservlet-mapping> 





5) Altere o arquivo aLuNos.xurML para que ele utilize um campo mascarado: 


a. Adicione à tag <ury.> o import das tags de componentes PrimeFaces: 


<html amlns="http://vrv.v3.0org/1999/xhtml" 
«mins:h="http://java.sun. com/]sf/html" 


Tang F= Th 
e Tio | 






b. Remova o campo referente ao Terrrone do aluno e, em seu lugar, use o componente 
<P: INPUTMASK>: 


<h: outputLabel value="Telefone:" for="fone" /> 





<p: inputMask value="f/alunoBean.aluno. telefone)" mask=-"(99) 9999-9999" id="fone"/> 


6) Configure o eclipse para executar a página web direto no navegador. Acesse o menu 
Window > General 5Web Browser > e habilite a opção: use external web 
browser. 


1) Execute a página alunos.xhtml com o Tomcat. 


16.5. EXERCÍCIOS: Componente datepicker 





1) Altere o arquivo aluno.xhtml para que agora ele utilize um componente de data. 
2) Remova o campo referente a data de nascimento do aluno. 
3) Em seu lugar, use o componente <p: calendar>: 


<h: outputLabel value="Data de Nascimento" for="dtNasc"” /> 
<p: calendar id="dtNasc" pattern="dd/MM/vyvy" 
value="f/alunoB=an.aluno. dtNasc. time)!" ></p: calendar> 
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4) Rode a página, veja que o resultado não ficou bom. Altere as tags dos inputs de 
<h:inputText> para <p:inputText> 


€ C |O localhost8080/dsl-jsf-escola/alunosxhiml 


Nome: 
Telefone: 
Data de Nascimento 
Gravar 0 Outubro 2011 E) 


Dom Seg Ter Qua Qui Sex Sab 


1 

3. 4 2 6 Pá 8 

LO JL 12) 13) 14d 

16), 1/],18)19)] 20 21),22 

DA AI DB ALI AB AO 
30 add 


16.6. EXERCÍCIOS: fixando conceitos - componente Galleria 





1) Em um novo projeto JSF, configure para utilizar o primefaces. 
2) Crie a pasta images e uma subpasta galleria no diretório NEBCONTENT do seu projeto. 
3) Localize a pasta Imagens no moodle e copie o seu conteúdo para a pasta galeria. 


4) Crie uma página galeria.xhtml no diretório WEBCONTENT. 


5) Adicione o código a seguir: 


<h:body> 
<«p:galleria effect="f/galleriabean.effect|j" effectSpeed="1000"> 
<ui:repeat value="f/galleriaBean.images)!" var="image"» 


<p: graphicIimage value="/images/galleria/fiimage!" 
E 5 + Si | TE, 


title="f/1mage)!" alt="Description goes here"/> 
<fui:repeat> 
</p:galleria> 


<fh:body> 


6) Não se esqueça de alterar as tags para o primefaces, inclusive do cabeçalho e corpo da 
página. 
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7) Adicione à tag <urm> o Import das tags de componentes PrimeF'aces: 


<html xmins="http://vvrvr.v3.0rg/1999/xhEml" 
xmins:h ="http://gava.sun. com/9sf/html" 
zmins:f ="http://gava. sun. com/Jsp/gstl/core" 
xmins:ui ="http://java.sun.com/gstf/facelets" 
xmins:p = "http://primefaces.prime. com. tr /uli "> 


Perceba que adicionamos as tags de componentes JSF, PrimeFaces e dos facelets 
indicado por ul. 


8) Crie agora o managedBean. 


EManagedBean 
public class GalleriaBean f 


private List<5String> images; 
private String effect = "fade", 
EPostConstruct 

pablic void init() £ 


images = new ArrayList<String>(): 


for (int i=lsi<=3sit+) | 
images.add ("galleria” + i + ".5pg"); 


poblic List<String> getImages() 1 
retaorn images; 


poblic String getEffecti() f 
return effect; 


poblic void setEffect (String effect) 1 
this.effect = effect; 


9) Você ainda vai precisar do jar do JSTL, para isso localize a pasta JSTL-JARS no moodle 
e cople-o para a pasta lib do seu projeto. Adicione no Build Path. 


10) Pronto! Agora execute a página galeria.xhtml. 
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